<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <style>
        *{
            max-width: 800px;
            margin: 10px auto;
        }
        header{
            height: 50px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
        }
        .name{
            margin-left: 10px;
            font-size: 20px;
            font-weight: bolder;
        }
        .head_img{
            display: inline-block;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background: url("img/head.jpg") no-repeat;
            background-size: 40px 40px;
            margin: 0 -180px 0 20px;
            cursor: pointer;
        }
        .head_img:hover{
            transition: .3s ease;
            transform: scale(1.5,1.5);
        }
        .head_right{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .head_right a{
            color: black;
            text-decoration: none;
        }
        .head_right a:hover{
            font-weight: bolder;
        }
        .head_right a:nth-child(n){
            margin: 0 5px;
        }
        .title{
            padding: 10px;
        }
        .pro{
            display: flex;
        }
        .power{
            display: inline-block;
            flex: 2;
            text-align: center;
            margin-right: 10px;
        }
        .process{
            flex: 2;
        }
        .process_top{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 40px;
            border-bottom: 1px solid lightsteelblue;
        }
        .process div span{
            text-align: center;
            line-height: 10px;
            width: 100%;
            height: 30px;
            cursor: pointer;
        }
        .process div span:hover{
            font-weight: bolder;
            border-bottom: 1px solid #F2F2F2;
        }
        .process, .power, .title, header, .item-content{
            background-color: #F2F2F2;
            box-shadow: 1px 1px 5px #F2F2F2;
        }
        .educate{
            border-bottom: 1px solid #F2F2F2;
        }
        .pro_rig, .pro_work{
            margin: 20px;
        }
        .pro_rig p, .pro_work p{
            height: 40px;
            display: flex;
            justify-content: space-between;
        }
        .work-item div{
            height: 200px;
            background-color: #F2F2F2;
        }
        .work-item div:nth-child(2n-1){
            background-color: #e5e5e5;
        }
        .item-content{
            display: flex;
            padding: 10px;
        }
        .item-l{
            flex: 1;
            border: 1px solid lightgrey;
        }
        .item-r{
            flex: 6;
            margin-left: 20px;
        }
        .item-head{
            padding:0 10px;
            height: 50px!important;
        }
        .item-head h4{
            float: left;
        }
        .item-head p{
            float: right;
        }
        .item-body{
            height: 120px!important;
            background-color: #e5e5e5!important;
            padding-left: 10px;
        }
        .item-body p:nth-child(2){
            margin: 10px 0;
        }
        .item-body1{
            height: 120px!important;
            background-color: #F2F2F2!important;
            padding-left: 10px;
        }
        .item-play{
            width: 800px;
            height: 350px;
            display: flex;
        }
        .itemplay-img{
            flex: 6;
            display: flex;
            flex-direction: column;
            margin-right: 10px;
        }
        .itemplay-img div{
            flex: 1;
            width: 100%;
            margin: 0;
        }
        .itemplay-img div:nth-child(1){
            margin-bottom: 10px;
            display: flex;
        }
        .itemplay-img div:nth-child(1) span{
            flex: 1;
            margin: 0;
            position: relative;
            box-shadow:1px 1px 10px #b2b2b2;
        }
        .itemplay-img div:nth-child(1) span:nth-child(n+1){
            margin-left: 10px;
        }
        .img-bottom{
            position: absolute;
            bottom: 0;
            z-index: 99;
            background-color: #b2b2b2;
            margin: 0!important;
        }
        .heart{
            margin: 0;
            border: 1px solid red;
            border-radius: 20px;
            cursor: pointer;
        }
        .itemplay-img div:nth-child(2){
            display: flex;
        }
        .itemplay-img div:nth-child(2) span{
            flex: 1;
            margin: 0;
            position: relative;
            box-shadow:1px 1px 10px #b2b2b2;
        }
        .itemplay-img div:nth-child(2) span:nth-child(n+1){
            margin-left: 10px;
        }
        .itemplay-text{
            flex: 2;
            background-color: #d8d8d8;
            padding: 0 5px 5px 5px;
        }
        .itemplay-text p{
            text-align: center;
        }
        .itemplay-text-content{
            width: 100%;
            height: 280px;
            display: flex;
            flex-direction: column;
            border: 1px solid lightsteelblue;
        }
        .itemplay-text-content div:nth-child(1){
            flex: 3;
            width: 100%;
            margin-top: 0;
        }
        .itemplay-text-content div:nth-child(2){
            flex: 1;
            width: 100%;
            margin: 0;
        }
        .contentipt{
            border-top: 1px solid lightsteelblue;
        }
        .itemplay-text-content div:nth-child(1) div{
            height: 60px;
            display: flex;
        }
        .contentimg{
            flex: 1;
            border: 1px solid lightsteelblue;
            border-radius: 50%;
        }
        .contentimg1{
            background: url("img/1.png");
        }
        .contentimg2{
            background: url("img/2.png");
        }
        .contentcon{
            flex: 4;
            background-color: #b2b2b2;
            padding-left: 10px;
            box-shadow:1px 1px 10px #b2b2b2;
        }
        .contentipt input, .contentipt button{
            margin: 0;
        }
        .ipt1, .ipt2{
            background-color: #d8d8d8;
            border: 1px solid lightsteelblue;
            outline: none;
            margin: 5px!important;
        }
        .ipt2{
            height: 23px;
            width: 90%;
        }
        .ipt1{
            height: 20px;
            width: 50%;
        }
        .btn{
            height: 20px;
            outline: none;
            width: 69px;
            border: 1px solid lightsteelblue;
            background-color: #cabebe;
            color: #f0f0f0;
        }
        .bottom{
            height: 70px;
            background-color: #b2b2b2;
            text-align: center;
            color: #f0f0f0;
            padding: 1px;
            box-sizing: border-box;
            box-shadow:1px 1px 10px #b2b2b2;
        }
        .xxx{
            margin: 0!important;
        }
    </style>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <header>
        <span class="name">凌昌茂</span>
        <span class="head_right">
            <a href="#">个人价绍</a> |
            <a href="#">项目介绍</a> |
            <a href="#">给我留言</a>
            <span class="head_img"></span>
        </span>
    </header>
    <div class="title">
        <h2>web前端工程师</h2>
        <h4>web前端工程师</h4>
        <p>1234567@qq.com</p>
        <p>123456789</p>
    </div>
    <div class="pro">
        <span class="power">
            <h3>技能掌握</h3>
            <div id="main" style="width: 370px;height:300px;background:#F2F2F2;"></div>
        </span>
        <span class="process">
            <div class="process_top">
                <span class="educate">教育经历</span>
                <span class="work">工作经历</span>
            </div>
            <div>
                <div class="pro_rig">
                    <p>
                        <span>2005-2011</span>
                        <span>小学</span>
                    </p>
                    <p>
                        <span>2011-2014</span>
                        <span>初中</span>
                    </p>
                    <p>
                        <span>2014-2017</span>
                        <span>高中</span>
                    </p>
                    <p>
                        <span>2018-2022</span>
                        <span>大学</span>
                    </p>
                </div>
                <div style="display: none" class="pro_work">
                     <p>
                        <span>2016</span>
                        <span>百果园</span>
                    </p>
                    <p>
                        <span>2018</span>
                        <span>凯健体育文化有限公司</span>
                    </p>
                    <p>
                        <span>2019</span>
                        <span>凯健体育文化有限公司</span>
                    </p>
                    <p>
                        <span>2018-2020</span>
                        <span>大学校内兼职</span>
                    </p>
                </div>
            </div>
        </span>
    </div>
    <div class="work-item">
        <div class="item-content">
                <span class="item-l"></span>
                <span class="item-r">
                    <div class="item-head">
                        <h4>项目标题</h4>
                        <p>项目时间</p>
                    </div>
                    <div class="item-body">
                        <p>项目角色 | 项目公司</p>
                        <p>项目介绍</p>
                        <p>该项目使用的技术Tag|技术Tag2|技术Tag3</p>
                    </div>
                </span>
            </div>
        <div class="item-content">
            <span class="item-l"></span>
            <span class="item-r">
                    <div class="item-head" style="background-color: #F2F2F2">
                        <h4>项目标题</h4>
                        <p>项目时间</p>
                    </div>
                    <div class="item-body1">
                        <p>项目角色 | 项目公司</p>
                        <p>项目介绍</p>
                        <p>该项目使用的技术Tag|技术Tag2|技术Tag3</p>
                    </div>
                </span>
        </div>
        <div class="item-content">
            <span class="item-l"></span>
            <span class="item-r">
                    <div class="item-head">
                        <h4>项目标题</h4>
                        <p>项目时间</p>
                    </div>
                    <div class="item-body">
                        <p>项目角色 | 项目公司</p>
                        <p>项目介绍</p>
                        <p>该项目使用的技术Tag|技术Tag2|技术Tag3</p>
                    </div>
                </span>
        </div>
    </div>
    <div class="item-play">
        <span class="itemplay-img">
            <div>
                <span class="xxx" style="background: url('img/1.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
                <span style="background: url('img/2.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
                <span style="background: url('img/3.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
                <span style="background: url('img/4.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
            </div>
            <div>
                <span class="xxx" style="background: url('img/5.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
                <span style="background: url('img/6.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
                <span style="background: url('img/7.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
                <span style="background: url('img/8.png');background-size: 147px 160px;">
                    <div class="img-bottom">information
                        <span class="heart"></span>
                    </div>
                </span>
            </div>
        </span>
        <span class="itemplay-text">
            <p style="font-weight:bolder ">留言板</p>
            <div class="itemplay-text-content">
                <div>
                    <div>
                        <span class="contentimg contentimg1"></span>
                        <span class="contentcon">216534654684</span>
                    </div>
                    <div>
                        <span class="contentcon">216534654684</span>
                        <span class="contentimg contentimg2"></span>
                    </div>
                </div>
                <div class="contentipt">
                    <input class="ipt2" type="text" placeholder="说点想说的吧...">
                    <input class="ipt1" type="text" placeholder="请输入姓名">
                    <button class="btn">发表</button>
                </div>
            </div>
        </span>
    </div>
    <div class="bottom">
        <h3>凌昌茂</h3>
        <p>QQ: 1308325900</p>
    </div>
</body>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var edu = document.querySelector('.educate')
    var work = document.querySelector('.work')
    var prol = document.querySelector('.pro_rig')
    var pror = document.querySelector('.pro_work')
    var heart = document.querySelectorAll('.heart')
    var btn = document.querySelector('.btn')
    edu.onclick = function () {
        edu.style.borderBottom = '1px solid #F2F2F2'
        work.style.borderBottom = '0'
        pror.style.display = 'none'
        prol.style.display = 'block'
    }
    work.onclick = function () {
        work.style.borderBottom = '1px solid #F2F2F2'
        edu.style.borderBottom = '0'
        prol.style.display = 'none'
        pror.style.display = 'block'
    }
    var option = {
        tooltip: {},
        xAxis: {},
        yAxis: {
            data: ["Element ui","Vue","node","Javascript","Css","Html"]
        },
        series: [{
            type: 'bar',
            data: [16, 17, 14, 15, 18, 19]
        }]
    };
    myChart.setOption(option);
    for (var i = 0;i<heart.length;i++){
        heart[i].onclick = function () {
            if (this.style.background == ''){
                this.style.background = 'red'
            }else {
                this.style.background = ''
            }
        }
    }
    btn.onclick = function () {
        btn.style.background = '#504f4f'
    }
</script>
</html>